<template>
    <div style="width: 80%;margin: 0 20px;">
        <!-- 添加按钮 -->
        <el-button type="primary" @click="dialogVisible1 = true" style="margin: 10px 0 ;">+添加商品</el-button>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border :default-expand-all=false>
            <el-table-column prop="className" label="分类名称" />
            <el-table-column prop="amount" label="商品数量" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link type="primary" size="small" v-if="scope.row.xianshi" @click="addchildbtn(scope.row)">增加子分类</el-button>
                    <el-button link type="primary" size="small" v-if="!(scope.row.xianshi)"
                         @click="editchildbtn(scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>

    <!-- 添加弹框 -->
    <el-dialog v-model="dialogVisible1" title="添加商品" width="30%">
        <el-form :inline="true" :model="adddate" class="demo-form-inline">
            <el-form-item label="分类名称：">
                <el-input v-model="adddate.className" placeholder="" clearable />
            </el-form-item>
            <el-form-item label="排序：">
                <el-input v-model="adddate.sort" placeholder="请输入数字" clearable style="margin-left: 28px;" />
            </el-form-item>
            <el-form-item label="上级分类：">
                <el-select v-model="adddate.upClassName" placeholder="请选择分类" clearable>
                    <el-option :label="i" :value="i" v-for="(i, index) in addhuixian" :key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="是否显示：">
                <el-radio-group v-model="adddate.visible" class="ml-4">
                    <el-radio :label=0 size="large">是</el-radio>
                    <el-radio :label=1 size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>


        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取消</el-button>
                <el-button type="primary" @click="addbtn">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 编辑弹框 -->
    <el-dialog v-model="dialogVisible2" title="编辑" width="30%">
        <el-form :inline="true" :model="editdate" class="demo-form-inline">
            <el-form-item label="分类名称：">
                <el-input v-model="editdate.className" placeholder="" clearable />
            </el-form-item>
            <el-form-item label="排序：">
                <el-input v-model="editdate.sort" placeholder="请输入数字" clearable style="margin-left: 28px;" />
            </el-form-item>
            <el-form-item label="上级分类：">
                <el-select v-model="editdate.upClassName" placeholder="请选择分类" clearable>
                    <el-option :label=i :value=i v-for="(i, index) in addhuixian" :key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="是否显示：">
                <el-radio-group v-model="editdate.visible" class="ml-4">
                    <el-radio :label=0 size="large">是</el-radio>
                    <el-radio :label=1 size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
       
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="editsave">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>

     <!-- 增加子分类 -->
     <el-dialog v-model="dialogVisible3" title="增加子分类" width="30%">
        <el-form :inline="true" :model="addchilddate" class="demo-form-inline">
            <el-form-item label="分类名称：">
                <el-input v-model="addchilddate.className" placeholder="" clearable />
            </el-form-item>
            <el-form-item label="排序：">
                <el-input v-model="addchilddate.sort" placeholder="请输入数字" clearable style="margin-left: 28px;" />
            </el-form-item>
            <el-form-item label="上级分类：">
                <el-select v-model="addchilddate.upClassName" placeholder="请选择分类" clearable>
                    <el-option :label="addChildHuixian" :value="addChildHuixian" :disabled=true />
                </el-select>
            </el-form-item>
            <el-form-item label="是否显示：">
                <el-radio-group v-model="addchilddate.visible" class="ml-4">
                    <el-radio :label=0 size="large">是</el-radio>
                    <el-radio :label=1 size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取消</el-button>
                <el-button type="primary" @click="addchildsave">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import axios from '../WuJiUtils/http';
import { reactive, ref } from 'vue';
let dialogVisible1 = ref(false)
let dialogVisible2 = ref(false)
let dialogVisible3 = ref(false)
let addhuixian: any = ref([])
let adddate: any = reactive({})
let editdate:any = reactive({})
let addchilddate:any = reactive({})
let addChildHuixian=ref('')
const tableData: any = reactive([])
const addbtn = () => {
    dialogVisible1.value = false
    axios({
        url: '/ClassifycationController/insert',
        method: 'post',
        data: adddate
    }).then((res) => {
        if (res.data.code == 0) {
            ElMessage({
                showClose: true,
                message: "添加成功",         //添加接口
                type: "success",
            });
            render()
        }else{
            ElMessage({
                showClose: true,
                message: "添加失败,请填写分类",
                type: "warning",
            });
        }

    })
}
const del=(v:number)=>{
    console.log(v);
    axios({
        url:'/ClassifycationController/delete',
        method:'get',
        params:{id:v}
    }).then((res)=>{
        console.log(res);
        if(res.data.code==0){
            ElMessage({
                showClose: true,
                message: "删除成功",
                type: "warning",
            });
            render()
        }else if(res.data.code==57004){
            ElMessage({
                showClose: true,
                message: "删除失败，此列表下还有商品",
                type: "warning",
            });
        }else if(res.data.code==57003){
            ElMessage({
                showClose: true,
                message: "删除失败，此分类下还有子分类",
                type: "warning",
            });
        }else{
            ElMessage({
                showClose: true,
                message: "删除失败",
                type: "warning",
            });
        }
        
    })
}
const addchildbtn=(v:any)=>{
    dialogVisible3.value = true
    addChildHuixian=v.className
    addchilddate.upClassName=v.className
    addchilddate.id=v.id
}
const addchildsave=()=>{
    dialogVisible3.value = false
    axios({
        url:'/ClassifycationController/insert',
        method:'post',
        data:addchilddate
    }).then((res) => {
        if (res.data.code == 0) {
            render()
            ElMessage({
                showClose: true,
                message: "添加子分类成功",         
                type: "success",
            });
        }else{
            ElMessage({
                showClose: true,
                message: "添加子分类失败,请填写分类",
                type: "warning",
            });
        }
    })
}
const editsave=()=>{
    dialogVisible2.value=false
    axios({
        url: '/ClassifycationController/update',
        method: 'post',
        data:editdate
    }).then((res)=>{
        if (res.data.code == 0) {
            render()
            ElMessage({
                showClose: true,
                message: "修改成功",         
                type: "success",
            });
        }else{
            ElMessage({
                showClose: true,
                message: "修改失败",
                type: "warning",
            });
        }
    })
}
const editchildbtn=((v:any)=>{
    editdate.id=v.id
    dialogVisible2.value=true
    editdate.className=v.className
})
const render = () => {
    axios({
        url: '/ClassifycationController/findClassify',
        method: 'get'
    }).then((res) => {
        if (res.data.code == 0) {
            let arr1 = res.data.data
            tableData.length = 0
            addhuixian.value.length = 0
            arr1.forEach((i:any) => {
                let childrens: any = []
                i.classNames.forEach((j:any) => {
                    childrens.push({ id: j.id, className: j.className, amount: j.amount, xianshi: false })
                })
                tableData.push({ id: i.id, className: i.className, amount: i.amount, children: childrens, xianshi: true })
                addhuixian.value.push(i.className)
            })
        }
    })
}
onMounted(() => {
    render()
})
</script>
<style lang="less">
.table {
    .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid red;

        .handle {
            display: flex;
            align-items: center;

            >div {
                margin-left: 10px;
                cursor: pointer;
            }
        }
    }

    .child {
        margin-left: 20px;
    }
}
</style>